<template>
	<view v-if="showAd && adData" class="ad-popup-container" :class="{'full-screen': fullScreen}">
		<view class="ad-popup-mask" @tap="closeAd"></view>
		<view class="ad-popup-content" :class="{'full-screen-content': fullScreen}">
			<!-- 关闭按钮 -->
			<view class="ad-close-btn" @tap="closeAd">
				<text class="close-icon">×</text>
			</view>

			<!-- 广告标题 -->
			<view class="ad-title" v-if="adData.company_name">
				<text>{{adData.company_name}}</text>
			</view>

			<!-- 图片广告 (ad_type=1 显示ad_images) -->
			<view v-if="adData.ad_type == 1" class="ad-image-container">
				<swiper v-if="adData.ad_images && adData.ad_images.length > 1"
					class="ad-swiper"
					:autoplay="true"
					:interval="3000"
					:duration="500"
					:circular="true">
					<swiper-item v-for="(image, index) in adData.ad_images" :key="index">
						<image :src="image" :mode="fullScreen ? 'aspectFit' : 'aspectFill'" @tap="onAdClick" />
					</swiper-item>
				</swiper>
				<!-- 如果只有一张图片 -->
				<image v-else-if="adData.ad_images && adData.ad_images.length === 1"
					:src="adData.ad_images[0]"
					:mode="fullScreen ? 'aspectFit' : 'aspectFill'"
					@tap="onAdClick" />
				<!-- 备用：如果ad_images为空但有ad_file -->
				<image v-else-if="adData.ad_file"
					:src="adData.ad_file"
					:mode="fullScreen ? 'aspectFit' : 'aspectFill'"
					@tap="onAdClick" />
			</view>

			<!-- 视频广告 (ad_type=2 显示ad_file) -->
			<view v-else-if="adData.ad_type == 2" class="ad-video-container">
				<video
					:src="adData.ad_file"
					:autoplay="true"
					:loop="false"
					:muted="false"
					:show-play-btn="true"
					:show-center-play-btn="true"
					:show-fullscreen-btn="fullScreen"
					:object-fit="fullScreen ? 'contain' : 'cover'"
					@ended="onVideoEnded"
					@tap="onAdClick"
					class="ad-video"
				></video>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'AdPopup',
		props: {
			// 是否自动获取广告
			autoLoad: {
				type: Boolean,
				default: true
			},
			// 是否全屏显示
			fullScreen: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				showAd: false,
				adData: null
			};
		},
		mounted() {
			if (this.autoLoad) {
				this.loadAd();
			}
		},
		methods: {
			// 加载广告
			loadAd() {
				// 直接获取广告数据，不限制显示次数
				const core = require('@/xilu/core.js');
				core.getActiveAd((data) => {
					if (data) {
						// 处理ad_images，确保是数组格式
						if (data.ad_images) {
							// 如果是字符串，转换为数组
							if (typeof data.ad_images === 'string') {
								data.ad_images = [data.ad_images];
							} else if (!Array.isArray(data.ad_images)) {
								data.ad_images = [];
							}
						} else {
							data.ad_images = [];
						}

						this.adData = data;
						this.showAd = true;
					}
				});
			},

			// 关闭广告
			closeAd() {
				this.showAd = false;
				this.$emit('close');
			},

			// 点击广告
			onAdClick() {
				if (!this.adData) return;

				// 记录点击
				const core = require('@/xilu/core.js');
				core.recordAdClick(this.adData.id);

				// 触发点击事件
				this.$emit('click', this.adData);

				// 关闭弹窗
				this.closeAd();
			},

			// 视频播放结束
			onVideoEnded() {
				// 可以自动关闭或等待用户操作
				// this.closeAd();
			},

			// 手动显示广告（供外部调用）
			show() {
				this.loadAd();
			}
		}
	};
</script>

<style lang="scss" scoped>
.ad-popup-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;

	// 全屏模式下不遮挡标题区域
	&.full-screen {
		/* #ifdef H5 */
		top: 44px;  // H5页面标题栏高度
		/* #endif */

		/* #ifndef H5 */
		top: var(--status-bar-height, 0);  // 小程序/APP状态栏高度
		padding-top: 44px;  // 导航栏高度
		/* #endif */
	}
}

.ad-popup-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);

	// 全屏模式下遮罩也要调整
	.full-screen & {
		/* #ifdef H5 */
		top: -44px;  // 补偿容器的top值
		/* #endif */

		/* #ifndef H5 */
		top: calc(-1 * var(--status-bar-height, 0) - 44px);
		/* #endif */
	}
}

.ad-popup-content {
	position: relative;
	width: 85%;
	max-width: 600rpx;
	background-color: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	z-index: 1;

	&.full-screen-content {
		width: 100%;
		height: calc(100% - 44px);  // 减去标题栏高度
		max-width: none;
		border-radius: 0;
		display: flex;
		flex-direction: column;

		/* #ifdef H5 */
		height: 100%;  // H5已经通过容器调整
		/* #endif */

		/* #ifndef H5 */
		margin-top: 0;  // 小程序/APP
		/* #endif */
	}
}

.ad-close-btn {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	width: 60rpx;
	height: 60rpx;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;

	.close-icon {
		color: #fff;
		font-size: 40rpx;
		font-weight: bold;
		line-height: 1;
	}
}

// 全屏模式下，关闭按钮需要更明显
.full-screen-content .ad-close-btn {
	top: 20rpx;  // 相对于内容区域定位
	right: 30rpx;
	width: 70rpx;
	height: 70rpx;
	background-color: rgba(0, 0, 0, 0.5);

	.close-icon {
		font-size: 50rpx;
	}
}

.ad-title {
	padding: 30rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	border-bottom: 1px solid #f0f0f0;
}

.ad-image-container {
	width: 100%;
	height: 600rpx;

	.ad-swiper {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}

.ad-video-container {
	width: 100%;
	height: 600rpx;

	.ad-video {
		width: 100%;
		height: 100%;
	}
}

// 全屏模式下的样式调整
.full-screen-content {
	.ad-image-container {
		height: 100%;
		flex: 1;
	}

	.ad-video-container {
		height: 100%;
		flex: 1;
	}

	.ad-title {
		flex-shrink: 0;
	}
}
</style>